<template>
  <div class="app-container">
    <el-button type="primary" size="mini" @click="exportExcel()">导出 Excel</el-button>
    <el-table id="out-table" ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="客户名称">
        <template slot-scope="scope">
          {{scope.row.custName}}
        </template>
      </el-table-column>
      <el-table-column label="手机">
        <template slot-scope="scope">
          {{scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column label="省份">
        <template slot-scope="scope">
          {{scope.row.province}}
        </template>
      </el-table-column>
      <el-table-column label="城市">
        <template slot-scope="scope">
          {{scope.row.city}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleQuotation(scope.row.id)">询价列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 4px;">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="pageTotal"
        @current-change="pageChange">
      </el-pagination>
    </div>

    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
      <template>
        <el-table
          :data="quotationList"
          style="width: 100%">
          <el-table-column
            prop="carName"
            label="车辆信息">
          </el-table-column>
          <el-table-column
            prop="registerDate"
            :formatter="dialogDateFormat"
            label="车辆登记日期">
          </el-table-column>
          <el-table-column
            prop="miles"
            label="里程数">
          </el-table-column>
          <el-table-column
            prop="quota"
            label="保额">
          </el-table-column>
          <el-table-column
            prop="premium"
            label="保费">
          </el-table-column>
          <el-table-column
            prop="reqTime"
            :formatter="dialogDateFormat"
            label="询价时间">
          </el-table-column>
        </el-table>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="js">
  import { customerApi } from '@/api/customer'
  import { parseTime } from '@/utils/index'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    data() {
      return {
        pageNum: 1, // 当前页
        pageSize: 20, // 每页数
        pageTotal: 0, // 总页数
        list: null,
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        form: {},
        quotationList: null // 询价列表
      }
    },
    filters: {
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        customerApi.getList(this.pageNum, this.pageSize).then(response => {
          console.log(response)
          this.list = response.list
          this.listLoading = false
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })
      },
      handleQuotation(id) {
        console.log(id)
        customerApi.getQuotationList(id).then(response => {
          console.log(response)
          this.quotationList = response.data
          this.dialogFormTitle = '客户询价列表'
          this.dialogFormVisible = true
        })
      },
      // 时间格式化
      parseTime(time) {
        return parseTime(time, null)
      },
      // 时间格式化
      dialogDateFormat: function(row, column) {
        var date = row[column.property]
        if (date == undefined) {
          return ''
        }
        return parseTime(date, null)
      },
      pageChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      // excel表格导出
      exportExcel() {
        /* generate workbook object from table */
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* get binary string as output */
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据'+parseTime(new Date(),' {y}-{m}-{d}')+'.xlsx')
        } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
        return wbout
      }
    }
  }
</script>
